<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        img {
            width: 100px;
        }
        
        li {
            list-style: none;
        }
        
        .t1 div {
            display: flex;
        }
        
        .tit1 {
            background-color: aqua;
        }
        
        .tit2 {
            margin-left: 10px;
            background-color: aqua;
        }
        
        .tb2 {
            display: none;
        }
        
        .id {
            display: none;
        }
        
        .tit {
            border-radius: 5px;
            border: 3px rgb(0, 0, 0) solid;
        }
    </style>
</head>

<body>
    <div>
        <div class="t1">
            <div>
                <button class="tit1 tit">居家用品</button >
                <button  class="tit2 tit">电子产品</button >
            </div>
            <div class="title">
                <table border="1px" class="tb1">
                    <thead>
                        <tr>
                            <th>商品名称</th>
                            <th>商品图片</th>
                            <th>商品价格</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>

                    </tbody>
                </table>
                <table border="1px" class="tb2">
                    <thead>
                        <tr>
                            <th>商品名称</th>
                            <th>商品图片</th>
                            <th>商品价格</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </div>
        </div>
        <div class="t2">
            <h2>购物车<button class="tit">删除已勾选</button></h2>
                <table border="1px" class="tb3">
                    <thead>
                        <tr>
                            <th><input type="checkbox" class="checkboxs">全选</th>
                            <th>商品名称</th>
                            <th>商品图片</th>
                            <th>商品价格</th>
                            <th>商品数量</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </div>
            <div>
                <div>总价格为<b></b>元</div>
            </div>
        </div>
        <script src="https://code.jquery.com/jquery-3.7.1.js"></script>
        <script>
            data1 = [{
                id: 1,
                name: '洗发水',
                img: './洗发水.png',
                price: 20,
                state: false

            }, {
                id: 2,
                name: '牙膏',
                img: './牙膏.png',
                price: 10,
                state: false
            }, ]
            data1.forEach(item => {
                jQuery('.tb1 tbody').append(`
                                    <tr>
                            <td>${item.name}</td>
                            <td><img src=${item.img}></td>
                            <td>${item.price} </td>
                            <td><button onclick=add1(${item.id}) >添加</button></td>
                        </tr>
            `)
            });

            let data2 = [{
                id: 3,
                name: '鼠标',
                img: './鼠标.png',
                price: 30,
                state: false
            }, {
                id: 4,
                name: '耳机',
                img: './耳机.png',
                price: 40,
                state: false
            }]

            data2.forEach(item => {
                jQuery('.tb2 tbody').append(`
                                    <tr>
                            <td>${item.name}</td>
                            <td><img src=${item.img}></td>
                            <td>${item.price} </td>
                            <td><button onclick=add2(${item.id})>添加</button></td>
                        </tr>
            `)
            });


            //tab栏切换
            jQuery('.tit1').click(() => {
                jQuery('.tb1').css('display', 'block')
                jQuery('.tb2').css('display', 'none')
            })
            jQuery('.tit2').click(() => {
                jQuery('.tb2').css('display', 'block')
                jQuery('.tb1').css('display', 'none')
            })

            //购物车数据
            let datas = []

            //数据1添加
            function add1(id) {
                let x = data1.find(item => item.id == id)
                datas.push({
                    id: x.id,
                    name: x.name,
                    img: x.img,
                    price: x.price,
                    quantity: 1,
                    state: x.state
                })
                adds()
            }

            //数据2添加
            function add2(id) {
                let x = data2.find(item => item.id == id)
                datas.push({
                    id: x.id,
                    name: x.name,
                    img: x.img,
                    price: x.price,
                    quantity: 1,
                    state: x.state
                })
                adds()
            }

            //购物车渲染
            function adds() {
                jQuery('.tb3 tbody').html('')
                datas.forEach(item => {
                        jQuery('.tb3 tbody').append(`
                  <tr>
                            <td><input type="checkbox" ${item.state==true?'checked':""}><span class="id">${item.id}</span></td>
                                <td>${item.name}</td>
                                <td><img src=${item.img}></td>
                                <td>${item.price} </td>
                                  <td>  
                                              <button onclick="add(${item.id})">+</button>
                                        ${item.quantity} 
                                              <button onclick="minus(${item.id})">-</button> </td>
                                <td><button onclick=del(${item.id})>删除</button></td>
                            </tr>
                `)
                    })
                    // 勾选
                jQuery('.tb3 tbody input').click(function() {
                    let id = jQuery(this).next().text()
                    let x = datas.find(item => item.id == id)
                    x.state = jQuery(this).prop('checked')
                    Total_price()
                })
                Total_price()
            }

            // 购物车加
            function add(id) {
                let x = datas.find(item => item.id == id)
                x.quantity++
                    adds()
            }

            // 购物车减
            function minus(id) {
                let x = datas.find(item => item.id == id)
                if (x.quantity > 1) {
                    x.quantity--
                        adds()
                }
            }

            // 全选反选
            let checkboxs = jQuery('.checkboxs')
            checkboxs.click(() => {
                jQuery('.tb3 tbody input').prop('checked', checkboxs.prop('checked'))
                datas.forEach(item => {
                    item.state = checkboxs.prop('checked')
                })
                Total_price()
            })

            //单个删除
            function del(id) {
                let x = datas.findIndex(item => item.id == id)
                datas.splice(x, 1)
                adds()
            }

            // 删除选中
            jQuery('.t2 h2 button').click(() => {
                for (let i = 0; i < datas.length; i++) {
                    datas.forEach(item => {
                        if (item.state == true) {
                            let x = datas.findIndex(items => items.id == item.id)
                            datas.splice(x, 1)
                        }
                    })
                    adds()
                }
            })

            //总价
            function Total_price() {
                let x = 0
                datas.forEach(item => {
                    if (item.state == true) {
                        x += item.price * item.quantity
                    }
                })
                jQuery('b').text(x)
            }
            Total_price()
        </script>
</body>

</html>